<template>
  <div class="app">
    <header class="app-header">
      <h1>header</h1>
    </header>
    <section class="app-main">
      <aside class="app-aside">
        <nuxt-link to="../msbd/"><h3>面试宝典列表</h3></nuxt-link>
        <nuxt-link to="../msbd/classify"><h3>类别分类列表</h3></nuxt-link>
        <nuxt-link to="../users/"><h3>用户名称列表</h3></nuxt-link>
      </aside>
      <section class="app-body">
        <Nuxt />
      </section>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style>
html,
body,
#__nuxt,
#__layout {
  height: 100%;
}
</style>

<style scoped>
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 100px;
  background-color: red;
}

.app-main{
    flex: 1;
    display: flex;
}

.app-aside{
    width: 150px;
    background-color: greenyellow;
}

.app-body{
    flex: 1;
    background-color: pink;
}

.app-aside h3{
    text-align: center;
}
</style>